<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI 面试系统 - 面试中 </title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <div class="container">
    <a class="navbar-brand" href="#">AI 面试系统</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <span class="nav-link">欢迎, <span th:text="${#authentication?.principal?.username ?: '游客'}">用户</span></span>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/interviews">我的面试</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/logout">退出登录</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container mt-5">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="card shadow">
        <div class="card-header bg-primary text-white">
          <div class="d-flex justify-content-between align-items-center">
            <h4 class="mb-0">AI 面试</h4>
            <span>第<span th:text="${currentQuestionNumber}">1</span>题 / 共<span th:text="${totalQuestions}">5</span>题</span>
          </div>
        </div>
        <div class="card-body">
          <h5 class="card-title mb-4" th:text="${currentQuestion.question}">问题内容</h5>

          <form method="post" th:action="@{/interview/answer/{interviewId}/{questionNumber}(interviewId=${interview.id}, questionNumber=${currentQuestionNumber})}">
            <div class="mb-4">
              <label for="answer" class="form-label">你的答案</label>
              <textarea class="form-control" id="answer" name="answer" rows="6"
                        placeholder="在这里输入你的答案..." required></textarea>
            </div>

            <div class="d-grid">
              <button type="submit" class="btn btn-primary">
                <span th:if="${currentQuestionNumber == totalQuestions}">完成面试</span>
                <span th:unless="${currentQuestionNumber == totalQuestions}">下一题</span>
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
